<template>
	<view class="centers">

<view class="title">
	<view class="title_t">
		<text class="number">¥{{price}}</text>
		<text class="number_f">¥5895.75 +7.59%</text>
	</view>
	<view class="title_t">
		<text class="zug"><text style="color: #999;margin-right: 10upx;">高</text> ¥79207.53</text>
		<text class="dg"><text style="color: #999;margin-right: 10upx;">低</text> ¥70954.91</text>
	</view>
	<view class="title_t">
		<text class="btc">{{name}}</text>
		<text class="liang">量1844.42万</text>
	</view>
	
</view>

	
	
	
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt qiun-rows">
				<view style="flex: 1;qiun-rows;text-align: right;">
					<button type="default" size="mini" style="background-color:#0E1B45; color: #fff;" @tap="tapButton('in')">放大</button>
					<button type="default" size="mini" style="margin-left: 20upx;background-color: #0E1B45;color: #fff;" @tap="tapButton('out')">缩小</button>
				</view>
			</view>
			<view class="qiun-charts">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasCandle" id="canvasCandle" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
				 :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchCandle" @touchmove="moveCandle"
				 @touchend="touchEndCandle"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="canvasCandle" id="canvasCandle" class="charts" disable-scroll=true @touchstart="touchCandle"
				 @touchmove="moveCandle" @touchend="touchEndCandle"></canvas>
				<!--#endif-->
			</view>
			
		
			
			<view class="qiun-padding qiun-bg-white ">
				<slider :value="itemCount" min="5" :max="sliderMax" block-color="#f8f8f8" block-size="18" @changing="sliderMove"
				 @change="sliderMove" />
			</view>
			
			
		
			
			
<view class="detail">
		<view class="detail_k">
			<view class="detail_x">
				<text class="tits">总额(24h) </text>
				<text class="ns">¥1902.36亿 </text>
			</view>
			<view class="detail_x">
				<text class="tits">换手(24h) </text>
				<text class="ns">+13.42%</text>
			</view>
		</view>
		<view class="detail_k">
		<view class="detail_x detail_xx">
			<text class="tits">流通市值 </text>
			<text class="ns">¥14177.64亿 </text>
		</view>
		<view class="detail_x detail_xx">
			<text class="tits">市值排名 </text>
			<text class="ns">{{(index)}}</text>
		</view>
		</view >
	</view>
			
			<view class="kan">
				<view class="zhang">
					
					<text class="s"> <text>看涨</text> +59.29%</text>
					<text class="q"> <text  style="color: #FF1F2F;">看跌</text> -40.71%</text>
					
				</view>
			</view>
			<!--#ifdef H5 -->
			<!-- 	<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
			<view class="qiun-title-dot-light">标准数据格式</view>
		</view> -->
				<!-- <view class="qiun-bg-white qiun-padding">
		    <textarea class="qiun-textarea" maxlength="-1" v-model="textarea"/>
		</view> -->
			<!-- <view class="qiun-text-tips">Tips：修改后点击更新图表</view> -->
			<!-- <button class="qiun-button" @tap="changeData()">更新图表</button> -->
			<!--#endif-->
			<view class="btn" @tap="btn">
				确定托管
			</view>
		</view>
		<view class="alert-wrapper center" v-if="flag">
			<view class="alert-inner">
					<text class="X" @tap="flag = !flag">   <text class="tuo">托管</text>    X</text>
					<!-- {{buyBiProfit.min_income*1000/30 |toTwo(2)}}‰-{{(buyBiProfit.max_income*1000)/30 | toTwo(2)}}‰ -->
				<text class="text">波动比例：3.00‰-15.00‰</text>
				<!-- <text class="text">预估收益：{{(buyBiProfit.min_income/30)*balance |toTwo(2)}}-{{(buyBiProfit.max_income/30)*balance |toTwo(2)}}</text> -->
				<!-- ¥{{  Math.floor( balance /100 ) * 100 }} -->
			<view class="nmh">
					<text class="text">托管金额：</text>
					<input type="number" v-model="mods" value="" placeholder-style="color:#fff" placeholder="请输入金额" class="inp"/>
			</view>
				<view class="btns" @tap='biy(balance)'>
					确定
				</view>
			</view>
		</view>
		<div id="main"></div>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import {
		isJSON
	} from '@/common/checker.js';
	var _self;
	var canvaCandle = null;

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				itemCount: 20, //x轴单屏数据密度
				sliderMax: 50,
				textarea: '',
				flag:false,
				name:'',
				price:'',
				index:'',
				buyBiProfit:{},
				//余额
				balance:'',
				names:'',
				mods:''
			}
		},
		onPullDownRefresh(){
			uni.startPullDownRefresh({
				success: () => {
						window.location.reload()
				}
			});
		},
		onLoad(options) {
			this.name = options.currency
			 this.price = options.price
			 this.index = options.index
			 this.names = options.names
			 //余额
			 this.Moeny()
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		onReady() {
			if(this.names){
				uni.setNavigationBarTitle({
				title: `${this.names}(${this.name})`,
				// this.names + '('+this.name+')'
				})
			}
		},
	
		methods: {
			getServerData() {
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data: {},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		let Candle = {
				// 			categories: [],
				// 			series: []
				// 		};
				// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		Candle.categories = res.data.data.Candle.categories;
				// 		Candle.series = res.data.data.Candle.series;
				// 		console.log(Candle.series )
				// 		_self.textarea = JSON.stringify(res.data.data.Candle);
				// 		_self.showCandle("canvasCandle", Candle);
				// 	},
				// 	fail: () => {
				// 		_self.tips = "网络错误，小程序端请检查合法域名";
				// 	},
				// });
				
				this.$ajax(
				this.apiList.BlockChainData,
				{name:this.name},
				).then(res=>{
					
					// console.log(Candle.series)
			let Candle = {
				categories: [],
				series: []
			};
				console.log(Candle)
			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
			Candle.categories = res.data.data.Candle.categories;
			Candle.series = res.data.data.Candle.series;
						// console.log(Candle.series )
			_self.textarea = JSON.stringify(res.data.data.Candle);
			_self.showCandle("canvasCandle", Candle);
		
				})
				
				
			},
			showCandle(canvasId, chartData) {
				canvaCandle = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'candle',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 8,
					},
					background: '#0e1b45',
					pixelRatio: _self.pixelRatio,
					enableMarkLine: true,
					/***需要开启标记线***/
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true, //不绘制X轴网格线
						labelCount: 4, //X轴文案数量
						//type:'grid',
						//gridType:'dash',
						itemCount: _self.itemCount, //可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'right',
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 5,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: false,
					dataPointShape: true,
					extra: {
						candle: {
							color: {
								upLine: '#f04864',
								upFill: '#f04864',
								downLine: '#2fc25b',
								downFill: '#2fc25b'
							},
							average: {
								show: true,
								name: ['MA5', 'MA10', 'MA30'],
								day: [5, 10, 20],
								color: ['#1890ff', '#2fc25b', '#facc14']
							}
						},
						tooltip: {
							bgColor: '#fff',
							bgOpacity: 0.7,
							gridType: 'dash',
							dashLength: 5,
							gridColor: '#1890ff',
							fontColor: '#FFFFFF',
							horizentalLine: true,
							xAxisLabel: true,
							yAxisLabel: true,
							labelBgColor: '#DFE8FF',
							labelBgOpacity: 0.95,
							labelAlign: 'left',
							labelFontColor: '#666666'
						},
						markLine: {
							type: 'dash',
							dashLength: 5,
							data: [{
								value: 2150,
								lineColor: '#f04864',
								showLabel: true
							}, {
								value: 2350,
								lineColor: '#f04864',
								showLabel: true
							}]
						}
					}
				});

			},
			touchCandle(e) {
				canvaCandle.scrollStart(e);
			},
			moveCandle(e) {
				canvaCandle.scroll(e);
			},
			touchEndCandle(e) {
				canvaCandle.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaCandle.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
				//这里演示了获取点击序列的方法，如需要将数据显示到canvas外面，可用此方法。
				var xx = canvaCandle.getCurrentDataIndex(e);
				// console.log(canvaCandle.opts.series[0].data[xx]);
				//下面是计算好的MA均线集合，想要点击序列中的当前数据，需要自己遍历seriesMA
				//console.log(canvaCandle.opts.seriesMA);
			},
			tapButton(type) {
				let step = 5;
				if (type == 'in') {
					_self.itemCount -= step;
					if (_self.itemCount <= 5) {
						_self.itemCount = 5;
					}
				} else {
					_self.itemCount += step;
					if (_self.itemCount >= _self.sliderMax) {
						_self.itemCount = _self.sliderMax;
					}
				}
				_self.zoomCandle(_self.itemCount);
			},
			sliderMove(e) {
				_self.itemCount = e.detail.value;
				_self.zoomCandle(e.detail.value);
			},
			zoomCandle(val) {
				canvaCandle.zoom({
					itemCount: val
				});
			},
			changeData() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					canvaCandle.updateData({
						series: newdata.series,
						categories: newdata.categories
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			},
		btn(){
		 this.flag = true
		 this.$ajax(
		 this.apiList.buyBiProfit,
		 {
			 currency:this.name
		 },
		 'POST'
		 ).then(res=>{

				 this.buyBiProfit = res.data
			
	
		 })
		},
		//余额
		Moeny(){
			this.$ajax(
			this.apiList.getUserMoeny,
		
			).then(res=>{
				this.balance = res.data.balance
			
			})
				},
				biy(Moeny){
					// let Mnoeys =''
					// Mnoeys = Math.floor(Moeny / 100) *100
						
					if( this.mods % 100 > 0 ){
						this.$sToast('购买数量只能输入100的倍数');
						return;
					}
					if( this.mods < 0 ){
						this.$sToast('输入的数量不能小于1');
						return
					}
					this.$ajax(
					this.apiList.buyBiType,
					{
						userId:uni.getStorageSync('userinfo').userId,
						biName:this.name,
						money:parseInt(this.mods)
					},
					"POST"
					).then(res=>{
						if(res.resultCode == 0 ){
							this.mods = ''
							this.flag = false
							this.$sToast(res.resultMsg)
						}else{
							this.flag = false
							this.mods = ''
							this.$sToast(res.resultMsg)
						
						}
					})
				}
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.centers {
		width: 100%;
		box-sizing: border-box;
		background-color: #0e1b45;
		height: 100vh;
	}
.title { box-sizing: border-box; width: 100%; padding: 30upx;  display: flex; justify-content: space-between; align-items: center; background-color: rgba(63, 77, 99, 0.12);}
.title_t { display: flex;  flex-direction: column; }
.title_t .number { font-size:46upx; font-family:DINPro; font-weight:bold; color: #02C076; margin-bottom: 10upx; }
.title_t .number_f { font-size:24upx; font-family:PingFang SC; font-weight:500; color: #02C076; }
.zug { font-size:24upx; font-family:PingFang SC; font-weight:bold; margin-bottom: 20upx; color: #fff; }
.dg { font-size:24upx; font-family:PingFang SC; font-weight:bold; color: #fff; }
.btc { color: #fff; font-size:50upx; letter-spacing: 5upx; font-family:PingFang SC;  text-align: center; margin-bottom: 10upx; }
.liang { font-size:24upx; font-family:PingFang SC; font-weight:500; color: #fff; }
.detail {  width: 100%; box-sizing: border-box; padding: 30upx; }
.detail_k { border: 1upx solid rgba(2, 151, 254, 1);  display: flex; flex-direction: row; justify-content: space-between; width: 100%; background-color: rgba(63, 77, 99, 0.12);  }
.detail_k:last-child {  border-top:none ;}
.detail_k:first-child {  border-bottom:none ;}
.detail_x { border-bottom:1upx solid #7E7E7E ; border-left:1upx solid #7E7E7E ; justify-content: space-between; display: flex; flex-direction: column;width:100%;padding:30upx 10upx;text-align: center; }
.detail_x:first-child { border-left: none;}
.detail_xx { border-bottom: none;}
.tits { font-size:24upx;font-family:PingFang SC;font-weight:500;color: #7E7E7E ;margin-bottom: 10upx; }
.ns { font-size:24upx;font-family:PingFang SC;font-weight:bold; color: #fff;}
.kan { width: 100%;box-sizing: border-box;  height: 54px; padding: 0 30upx;}
.zhang { display: flex; justify-content: space-between; height: 100%; width: 100%; box-sizing: border-box;  line-height:68upx ; }
.zhang text { box-sizing: border-box; height: 100%; display: inline-block; text-align: center; font-size: 30upx; font-weight: 500; color: #02C076;}

.s {  display: inline-block; width: 127px; line-height: 54px; color: #fff !important; background: url(../../static/bizhan/s17.png) no-repeat; background-size: 100% 100%;}
.q {  display: inline-block;  width: 127px; line-height: 54px; background: url(../../static/bizhan/s17.png) no-repeat; background-size: 100% 100%; color: #fff !important;  }

.btn { width: 100%; height: 94upx;position: fixed; left: 0; bottom: 0;background-color: #061031; text-align: center;line-height: 94upx; color: #0297FE; font-size: 30upx; letter-spacing: 5upx; box-sizing: border-box;}
.alert-inner { 
	width:675rpx;
	height: auto;
	background:url(../../static/bizhan/s22.png)no-repeat;
	background-size: 100% 100%;
	border-radius:12rpx;
	display: flex;
	flex-direction: column;
	padding: 30upx 40upx 40upx 40upx;
	}
	.nmh {
		display: flex;
		align-items: center;
		color: #fff;
	}
	.text {
		display: block;
		height: 98upx;
		padding: 10upx 50upx;
		background-color: rgba(255,255,255,0);
		font-size:28upx;
		font-family:PingFang SC;
		font-weight:bold;
		line-height: 98upx;
		text-align: left;
		color: #fff;
	}
	.X {
		font-size: 40upx;
		text-align: right;
		color: #7E7E7E;
		display: block;
		padding: 10upx 0;
	
	}
	.tuo {
		margin-right: 36%;
		color: #fff;
		font-size: 36upx;
		letter-spacing: 15upx;
		
	}
	.btns {
		height: 88upx;
		background-color: #0297FE;
		opacity: 0.8;
		border-radius: 40upx;
		text-align: center;
		color: #fff;
		font-size: 34upx;
		line-height: 88upx;
		letter-spacing: 5upx;
	}
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 100%;
		height: 100%;
		background-color: #0e1b45;
		box-sizing: border-box;
	
	}

	.qiun-textarea {
		height: 300upx;
	}
	
</style>
